import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class RecommendPage extends StatefulWidget {
  const RecommendPage({Key? key}) : super(key: key);

  @override
  _RecommendPageState createState() => _RecommendPageState();
}

class _RecommendPageState extends State<RecommendPage> {
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.grey,
      child: ListView(
        children: [
          Container(
            height: 205,
            child: ListView(
              scrollDirection: Axis.horizontal,
              children: [
                recommendItem("国产剧"),
                recommendItem("综艺"),
                recommendItem("美剧"),
                recommendItem("4"),
                recommendItem("5"),
                recommendItem("6"),
              ],
            ),
          ),
          sharpWidget("热门"),
          sharpWidget("最新"),
          sharpWidget("豆瓣高分"),
          sharpWidget("冷门佳片"),
          sharpWidget("华语"),
          sharpWidget("欧美"),
          sharpWidget("韩国"),
          sharpWidget("日本"),
          sharpWidget("动作"),
          sharpWidget("喜剧"),
          sharpWidget("爱情"),
          sharpWidget("科幻"),
          sharpWidget("恐怖"),
          sharpWidget("文艺"),
        ],
      ),
    );
  }

  Widget recommendItem(String title) {
    return Container(
        decoration: BoxDecoration(
          color: Colors.black87,
          borderRadius: BorderRadius.all(Radius.circular(5)),
        ),
        margin: EdgeInsets.all(5),
        padding: EdgeInsets.all(5),
        height: 185,
        width: 180,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Row(
              mainAxisAlignment: MainAxisAlignment.start,
              children: [
                Text(title, style: TextStyle(fontSize: 15, color: Colors.white, fontWeight: FontWeight.bold),)
              ]
            ),
            smallItem(),
            smallItem(),
            smallItem(),
            Container(
              child: Center(
                child: Text("查看更多", style: TextStyle(fontSize: 10, color: Colors.white, fontWeight: FontWeight.w600),),
              ),
            )
          ],
        ),

    );
  }

  Widget smallItem() {
    return Container(
      padding: EdgeInsets.only(top: 5),
      child: Row(
        children: [
          Container(
            color: Colors.red,
            height: 40,
            width: 50,
          ),
          Container(
            margin: EdgeInsets.only(left: 5),
            height: 40,
            child: Column(
              mainAxisAlignment: MainAxisAlignment.start,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text("叛逆者", style: TextStyle(color: Colors.white, fontSize: 12),),
                Row(
                  children: [Text("8.3", style: TextStyle(color: Colors.white, fontSize: 10))],
                )
              ],
            ),
          )
        ],
      ),
    );
  }
  
  Widget sharpWidget(String title) {
    return Container(
      height: 160,
      margin: EdgeInsets.only(left: 5, right: 5, bottom: 5),
      padding: EdgeInsets.all(5),
      decoration: BoxDecoration(
        color: Colors.black87,
        borderRadius: BorderRadius.all(Radius.circular(5))
      ),
      child: Column(
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Text(title, style: TextStyle(fontSize: 14, color: Colors.white, fontWeight: FontWeight.bold),),
              Text("更多 〉 ", style: TextStyle(fontSize: 12, color: Colors.white, fontWeight: FontWeight.w600),)
            ],
          ),
          Container(
            height: 130,
            child: ListView.builder(
              scrollDirection: Axis.horizontal,
              itemCount: 10,
              itemBuilder: (BuildContext cxt, int index) {
                return middleItem("夏日友晴天");
              },
            ),
          )
        ],
      ),
    );
  }

  Widget middleItem(String title) {
    return Container(
      padding: EdgeInsets.only(top: 5, right: 5),
      decoration: BoxDecoration(
        borderRadius: BorderRadius.all(Radius.circular(5)),
      ),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Container(
            width: 80,
            height: 100,
            color: Colors.red,
          ),
          Text(title, style: TextStyle(color: Colors.white, fontSize: 10, fontWeight: FontWeight.bold),)
        ],
      ),
    );
  }
}
